<template>
	<view class="page">
		<view class="info_panel">
			<image :src="bgImg" class="bg" />
			<view class="bottom">
				<view class="item">
					<view class="content">
						<text class="label">本月待收益(元)</text>
						<view class="num">{{ statistics.now_month_commission || 0 }}</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="item right">
					<view class="content">
						<text class="label">本月业绩(元)</text>
						<view class="num">{{ statistics.now_month_commission || 0 }}</view>
					</view>
				</view>
			</view>
		</view>
		<list reqUrl="/api/tealtotallog" ref="listInstance" :immediatecheck="false">
			<template v-slot="{ list }">
				<view class="detailed">
					<view class="head">
						<view class="line"></view>
						<view class="title">团队业绩明细</view>
					</view>

					<view v-for="item in list" :key="item.msg_code" class="item">
						<view class="top">
							<text>{{item.total}}</text>
						</view>
						<view v-if="item.msg_code" class="des">结算单号：{{ item.msg_code }}</view>
						<view v-if="item.create_at" class="des">时间：{{ item.create_at }}</view>
					</view>
				</view>
			</template>
		</list>
	</view>
</template>

<script setup>
	import { ref, nextTick, computed } from 'vue';
	import request from '@/utils/common/request/index';
	import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { sleep } from '@/utils/common/index';
	import { useGetThemColor } from '@/hooks/useGetThemColor';
	import { useGlobalNetworkImageStore } from '@/store/modules/useGlobalNetworkImage.js';

	const { imgHost } = getApp().globalData;
	const { primaryColor } = useGetThemColor();
	const globalNetworkImageStore = useGlobalNetworkImageStore();
	const bgImg = computed(() => {
		return imgHost + globalNetworkImageStore.value.teamTopImg;
	})

	const listInstance = ref(null);
	onShow(() => {
		nextTick(async () => {
			// #ifdef H5
			await sleep(10);
			// #endif
			getDetail();
			listInstance.value.resetRequest();
		})
	})

	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});
	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		Promise.all([getDetail(), listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});

	// * 获取明细
	const getDetail = () => {
		return request({
			url: '/api/monthteam'
		}).then(res => {
			statistics.value = res;
		});
	};
	let statistics = ref({});
</script>

<style lang="scss" scoped>
	.info_panel {
		position: relative;
		box-sizing: border-box;
		padding: 24px 45px;
		border-radius: 10px;
		overflow: hidden;
		color: #fff;
		z-index: 1;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.label {
			font-size: 12px;
			opacity: 0.8;
		}

		.bottom {
			display: flex;
			align-items: center;

			.item {
				display: flex;
				width: 49.75%;

				.content {
					text-align: center;

					.num {
						margin-top: 5px;
						font-size: 18px;
						font-weight: bold;
					}
				}
			}

			.line {
				width: 0.5%;
				height: 42px;
				background-color: rgba($color: #fff, $alpha: 0.6);
			}

			.right {
				justify-content: flex-end;
			}
		}
	}

	.detailed {
		margin-top: 10px;
		padding: 14px 14px 10px;
		border-radius: 10px;
		background-color: #fff;

		.head {
			display: flex;
			align-items: center;
			padding-bottom: 5px;

			.line {
				height: 16px;
				width: 2px;
				background-color: v-bind(primaryColor);
			}

			.title {
				padding-left: 5px;
				font-size: 16px;
				font-weight: bold;
				color: #343440;
			}
		}

		.item {
			padding: 12px 0;

			&+.item {
				border-top: 1px solid #f5f5f5;
			}

			.top {
				display: flex;
				justify-content: space-between;
				padding-bottom: 4px;
				font-weight: 550;
			}

			.des {
				margin-top: 2px;
				font-size: 12px;
				color: #a5a6ab;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>